var g_done = false;

function use(server, lang, callback) {
	var script = document.getElementsByTagName('script')[0],
		 newjs = document.createElement('script'),
		 langjs = document.createElement('script'),
		 newcss = document.createElement('link');

	if( g_done === true ) {
		callback();
		return;
	}

	var build_ribbon = function() {
		var data = {
			stamps: ['Approved finance','Rejected finance','Approved Administration','Rejected Administration','Postponed'],
			users: ['martinme','adelano','johndo','jakamutota','pivozjednoty','mineralka','kafeodzida'] 
		};
		var html = new EJS({url: 'scripts/WebViewer_Ribbon.ejs'}).render(data)

 	   $('div.mainContainer').empty();
  	   $('div.mainContainer').append($(html));
  	   $('div.mainContainer').Ribbon({ theme: 'windows7_no_orb' });

		var g_zoomTimer;
		$('#zoom-in').bind('mousedown', function(e) {
			console.log('mouse down');
			g_zoomTimer = setInterval( function() {
				console.log('zooming in');
				var w = parseFloat($('#cont_id_01').css('width'));
				var h = parseFloat($('#cont_id_01').css('height'));
//				var m = parseFloat($('#cont_id_01').css('margin-left'));
				var c = parseFloat($('div.page_container').css('width'));
				var m = ( c - w ) / 2;
				
				var o = w;
				var d;
				w *= 1.03;
				h *= 1.03;
				d = (w - o ) / 2;
				m = m - d;
				m = ( m > 0? m: 0 );
				var mx = w / 1112;
				var hc = h + 10;
//				$('#page_id_01').removeAttr('width').attr('width', w + 'px');
//				$('#page_id_01').removeAttr('height').attr('height', h + 'px');
//				$('#cont_id_01').css('width', w + 'px');
//				$('#cont_id_01').css('height', h + 'px');
//				$('#cont_id_01').css('margin-left', m + 'px');
//				$('#cont_id_01').css('margin-right', m + 'px');
//				$('#page_id_01 > g[transform]').attr('transform', 'matrix(' + mx + ',0.0,0.0,' + mx + ',0.0,0.0)');

// 			-webkit-transform: scale(0.520764) translateX(-267px) translateY(-346px);
				$('div.document_container > div').css('height', hc + 'px' );
				$('div.document_container > div > div > svg').removeAttr('width').removeAttr('height').attr('width', w + 'px').attr('height', h + 'px' );
				$('div.document_container > div > div').css('width', w + 'px').css('height', h + 'px').css('margin-left', m + 'px').css('margin-right', m + 'px' );
				$('div.document_container > div > div > svg > g[transform]').attr('transform', 'matrix(' + mx + ',0.0,0.0,' + mx + ',0.0,0.0)');

				/* top/bottom scrolling is always used */
				var current = $('div.document_container').scrollTop();
				var ratio = w / o; 
				current *= ratio; // trick for keeping the mid screen mid point in the middle.
//				current *= (ratio * 1.005); // trick for keeping the mid screen mid point in the middle.
				console.log("Current=" + current );
//				current += (546/2);
				console.log("Current=" + current );
				$('div.document_container').scrollTop(current);

				/* use scrolling when the content overflows right/left margin */
				if( m == 0 ) {
					console.log('trigger scroll!');
					m = ( w - c ) / 2;
					$('div.document_container').scrollLeft(m);
				}
			}, 30 );
		});				
		$('#zoom-in').bind('mouseup', function(e) {
			console.log('mouse up');
			window.clearInterval(g_zoomTimer);
		});				
		$('#zoom-out').bind('mousedown', function(e) {
			console.log('mouse down');
			g_zoomTimer = setInterval( function() {
				console.log('zooming in');
				var w = parseFloat($('#cont_id_01').css('width'));
				var h = parseFloat($('#cont_id_01').css('height'));
//				var m = parseFloat($('#cont_id_01').css('margin-left'));
				var c = parseFloat($('div.page_container').css('width'));
				var m = ( c - w ) / 2;
				var o = w;
				var d;
				w *= 0.97;
				h *= 0.97;
				d = (w - o ) / 2;
				m = m - d;
				m = ( m > 0 ? m: 0 );
				var mx = w / 1112;
				var hc = h + 10;

				$('div.document_container > div').css('height', hc + 'px' );
				$('div.document_container > div > div > svg').removeAttr('width').removeAttr('height').attr('width', w + 'px').attr('height', h + 'px' );
				$('div.document_container > div > div').css('width', w + 'px').css('height', h + 'px').css('margin-left', m + 'px').css('margin-right', m + 'px' );
				$('div.document_container > div > div > svg > g[transform]').attr('transform', 'matrix(' + mx + ',0.0,0.0,' + mx + ',0.0,0.0)');

				/* top/bottom scrolling is always used */
				var current = $('div.document_container').scrollTop();
				var ratio = w / o; 
				current *= ratio;
//				current *= (ratio * 0.995);
				$('div.document_container').scrollTop(current);

				if( m == 0 ) {
					console.log('trigger scroll!');
					m = ( w - c ) / 2;
					$('div.document_container').scrollLeft(m);
				}
			}, 30 );
		});				
		$('#zoom-out').bind('mouseup', function(e) {
			console.log('mouse up');
			window.clearInterval(g_zoomTimer);
		});				
		$('#anno-id-01').bind('mouseup', function(e) {
			console.log('mouseup even on Canvas caught');
			ev_canvas(e);
		});
		$('#anno-id-01').bind('mousedown', function(e) {
			console.log('mousedown even on Canvas caught');
			ev_canvas(e);
		});
		$('#anno-id-01').bind('mousemove', function(e) {
			console.log('mousemove even on Canvas caught');
			ev_canvas(e);
		});

		var canvas = document.getElementById( 'anno-id-01' );
				
		// Check the element is in the DOM and the browser supports canvas
		if(!(canvas && canvas.getContext)) {
     		return;
   	}
      
		// Initaliase a 2-dimensional drawing context
		var context = canvas.getContext('2d');

		console.log('build_ribbon: creating the freehandtool for canvas' + canvas + ' with context ' + context );
//   	opentext.tools.data.pencil = new opentext.FreehandTool( canvas, context );
   	opentext.tools.data.pencil = new FreehandTool( canvas, context );

	};

	var __callback = function() { 
		build_ribbon();
		callback()
  	};

	newcss.type = "text/css";
	newcss.rel = "stylesheet";	
	newcss.href = 'http://' + server + '/Ribbon/res/css/viewer.css';
	script.parentNode.insertBefore(newcss, script );

	//
	// IE
	newjs.onreadystatechange = function () {
		if (newjs.readyState === 'loaded' || newjs.readyState === 'complete') {
			newjs.onreadystatechange = null;
			if( lang !== null && lang.toLowerCase() !== 'en' ) {
				langjs.src = 'http://' + server + '/Ribbon/res/src/viewer.' + lang.toLowerCase() + '.js';
				script.parentNode.insertBefore(langjs, script);
				langjs.onreadystatechnage = function() {
					if (langjs.readyState === 'loaded' || langjs.readyState === 'complete') {
						langjs.onreadystatechange = null;
						__callback();
					}
				};
			} else {
				__callback();
			}
		}	
	};
	//
	// others
	newjs.onload = function () {
		if( (lang !== null && lang.toLowerCase() !== 'en') ) {
			langjs.src = 'http://' + server + '/Ribbon/res/src/viewer.' + lang.toLowerCase() + '.js';
			script.parentNode.insertBefore(langjs, script);
			langjs.onload = function() {
				__callback();
			};
		} else {
			__callback();
		}
	};

	newjs.src = 'http://' + server + '/Ribbon/res/src/rhea.js';
	script.parentNode.insertBefore(newjs, script);
	g_done = true;
}
